<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'JSTest.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
	
	<script type="text/javascript">
		window.onscroll = function(){
			//图片随窗口滚动
			var oWaterMarker = document.getElementById("divWaterMarker");
			oWaterMarker.style.top = document.body.scrollTop+20;
		}
		
		function getRandom(){
			var x=parseInt(Math.random()*(800000000000000-1))+1;
			if (x<10) x='0'+x;
			$("#random").val(x);
		}
		$(function(){
			alert($("div").length);
			//一个模仿悬停事件，鼠标放在p上颜色变灰色，离开之后变白色
			$("p").hover(function(){
				$(this).css("background","gray");
			},function(){
				$(this).css("background","#fff");
			});
			alert("-0.123".charAt(5));
		})
	</script>
  </head>
  
  <body>
  <div style="display: none;"></div>
  	<div>
  		随机数:<input type="text" id="random"/><input type="button" onclick="getRandom();" value="获取随机数"/>
  		<p>try scrolling this window!</p>
  		<div id="divWaterMarker" style="position: absolute;top: 20px;right: 200px;color: #fffff;height: 30px;width: 150px;background-color: gray;">
  			divWaterMarker:<img alt="divWaterMarker" src="/photopath/psb7.jpg" style="width: 300px;height: 150px;">
  		</div>
  		<p>line 1</p>
  		<p>line 2</p>
  		<p>line 3</p>
  		<p>line 4</p>
  		<p>line 5</p>
  		<p>line 6</p>
  		<p>line 7</p>
  		<p>line 8</p>
  		<p>line 9</p>
  		<p>line 10</p>
  		<p>line 11</p>
  		<p>line 12</p>
  		<p>line 13</p>
  		<p>line 14</p>
  		<p>line 15</p>
  		<p>line 16</p>
  		<p>line 17</p>
  		<p>line 18</p>
  		<p>line 19</p>
  		<p>line 20</p>
  		<p>line 21</p>
  		<p>line 22</p>
  		<p>line 23</p>
  		<p>line 24</p>
  	</div>
  </body>
</html>
